<template>
  <div style="height: 14rem;">
    <div v-if="username">
      <div
        style="
          width: 100%;
          height: 2rem;
          background-color: #e8f4ff;
          display: flex;
          justify-content: space-around;
          align-items: center;
        "
      >
        <span
          ><img
            src="../../../public/1.png"
            style="width: 1rem; height: 1rem"
            alt=""
        /></span>
        <span style="font-size: 0.4rem">{{nc}}</span>
        <span style="font-size: 0.3rem;margin-left: 0.5rem;margin-top: 0.2rem;" @click="qian">签到</span>
        <span @click="user"
          ><img
            src="../../../public/2.png"
            style="width: 1rem; height: 0.8rem"
            alt=""
        /></span>
      </div>
      <div class="gong">
        <div class="zai" @click="online">在线问诊</div>
        <!-- <router-link to="/zhen">在线问诊</router-link> -->
        <div class="zai" @click="jian">健康档案</div>
        <div class="zai" @click="med">用药建议</div>
        <div class="zai" @click="order">优选订单</div>
        <div class="zai" @click="doctor">我的医生</div>
        <div class="zai" @click="sui">随访计划</div>
      </div>
      <div>
        <div class="huo" @click="receiving">
          <span style="font-size: 0.35rem; float: left">收货地址</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="coupons">
          <span style="font-size: 0.35rem; float: left">我的卡券</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="outpatient">
          <span style="font-size: 0.35rem; float: left">门诊预约</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="price">
          <span style="font-size: 0.35rem; float: left">价格公示</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="opinion">
          <span style="font-size: 0.35rem; float: left">意见反馈</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="users">
          <span style="font-size: 0.35rem; float: left">用户协议</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="privacy">
          <span style="font-size: 0.35rem; float: left">隐私协议</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="aboutUs">
          <span style="font-size: 0.35rem; float: left">关于我们</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
      </div>
    </div>
    <div v-else>
      <div
        style="
          width: 100%;
          height: 2rem;
          background-color: #e8f4ff;
          display: flex;
          justify-content: space-around;
          align-items: center;
        "
      >
        <span
          ><img
            src="../../../public/1.png"
            style="width: 1rem; height: 1rem"
            alt=""
        /></span>
        <span style="font-size: 0.4rem">点击登录></span>
        <span @click="showPopup"
          ><img
            src="../../../public/2.png"
            style="width: 1rem; height: 0.8rem"
            alt=""
        /></span>
      </div>
      <div style="font-size: 0.35rem">
        <!-- 圆角弹窗（底部） -->
        <van-popup
          v-model:show="showBottom"
          round
          position="bottom"
          :style="{ height: '30%' }"
        >
          <p style="text-align: center; margin-top: 0.5rem">
            <span style="color: #ccc">————</span>请先登录<span
              style="color: #ccc"
              >————</span
            >
          </p>
          <p>
            <span
              style="
                width: 2rem;
                height: 0.8rem;
                display: inline-block;
                text-align: center;
                line-height: 0.8rem;
                border: 0.01rem solid #ccc;
                margin-left: 0.5rem;
                border-radius: 0.4rem;
              "
              @click="qx"
              >暂不登录</span
            >
            <span
              style="
                width: 4rem;
                height: 0.8rem;
                background: #2e7aec;
                display: inline-block;
                text-align: center;
                color: #fff;
                line-height: 0.8rem;
                border: 0.01rem solid #ccc;
                margin-left: 0.5rem;
                border-radius: 0.4rem;
              "
              @click="ty"
              >同意隐私协议并登录</span
            >
          </p>
          <p style="margin-left: 0.5rem">
            <van-checkbox v-model="checked"
              ><span style="color: #ccc">已阅读并同意</span
              ><span><a href="/ding/xieyi">《妙手医生服务协议》</a></span
              ><span><a href="">《妙手医生隐私政策》</a></span
              ><span style="color: #ccc">及</span
              ><span
                ><a href="">《妙手医生儿童个人信息保护规则》</a></span
              ></van-checkbox
            >
          </p>
        </van-popup>
      </div>
      <div style="font-size: 0.3rem">
        <van-popup v-model:show="show" :style="{ padding: '64px' }"
          >请先勾选服务协议及隐私政策</van-popup
        >
      </div>
      <div class="gong">
        <div class="zai" @click="showPopup">在线问诊</div>
        <!-- <router-link to="/zhen">在线问诊</router-link> -->
        <div class="zai" @click="showPopup">健康档案</div>
        <div class="zai" @click="showPopup">用药建议</div>
        <div class="zai" @click="showPopup">优选订单</div>
        <div class="zai" @click="showPopup">我的医生</div>
        <div class="zai" @click="showPopup">随访计划</div>
      </div>
      <div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">收货地址</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">我的卡券</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">门诊预约</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">价格公示</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup" >
          <span style="font-size: 0.35rem; float: left">意见反馈</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">用户协议</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">隐私协议</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
        <div class="huo" @click="showPopup">
          <span style="font-size: 0.35rem; float: left">关于我们</span
          ><span style="font-size: 0.35rem; display: inline-block; float: right"
            >></span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import axios from 'axios'
import { showToast } from 'vant';


// 签到
const qian=()=>{
  showToast('签到成功');
}

const username = localStorage.getItem('username')

const nc=localStorage.getItem('nc')
console.log(nc)

const router = useRouter()
const opinion = () => {
  router.push('/wtfk')
}
const users = () => {
  router.push('/ding/user')
}
const price = () => {
  router.push('/ding/price')
}
const aboutUs = () => {
  router.push('/ding/aboutUs')
}
const privacy = () => {
  router.push('/ding/privacy')
}
const outpatient = () => {
  router.push('/ding/outpatient')
}
const coupons = () => {
  router.push('/ding/coupons')
}
const receiving = () => {
  router.push('/ding/receiving')
}
const user = () => {
  router.push('/ding/users')
}
const online = () => {
  router.push('/ding/zhen')
}
const jian = () => {
  router.push('/ding/jian')
}
const med = () => {
  router.push('/ding/med')
}
const order = () => {
  router.push('/ding/order')
}
const doctor = () => {
  router.push('/ding/doctor')
}
const sui = () => {
  router.push('/ding/sui')
}

// const show1 = ref(false)

const show = ref(false)

const checked = ref(false)

const data = ref([])
const ty = async () => {
  if (checked.value == false) {
    showToast('请先勾选服务协议及隐私政策');
  } else {
    // show1.value = true
    router.push('/ding/login')
  }
}
const showBottom = ref(false)
const qx = () => {
  showBottom.value = false
}
const showPopup = () => {
  showBottom.value = true
}

// 点击允许登录
const dl = async () => {
  await axios
    .post('/api/login', {
      username: 'admin',
      password: '123456',
    })
    .then(res => {
      console.log(res.data.data.data[0].username)
      localStorage.setItem('username', res.data.data.data[0].username)
      // show1.value = false
      showBottom.value = false
    })
}
</script>

<style>
.sjh {
  margin-left: -0.8rem;
}
#sjh {
  font-weight: bold;
  font-size: 0.3rem;
  margin-left: -1rem !important;
  margin-top: -0.01rem !important;
}
#shen {
  clear: both;
  margin-left: -1rem !important;
  margin-top: -1rem !important;
}
.huo {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.huo span {
  display: inline-block;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #c1d5f3;
}
.gong {
  width: 100%;
  height: 2.8rem;
  background: #e8f4ff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.zai {
  font-size: 0.35rem;
  width: 45%;
  height: 0.8rem;
  background: #fff;
  text-align: center;
  line-height: 0.8rem;
}
</style>

